<!DOCTYPE html>
<html ng-app="demoapp">
<head lang="en">
    <meta charset="UTF-8">
    <title>angular-directive与controller通信</title>
    <script src="../lib/angular-libs/angular.min.js"></script>
    <script src="../lib/angular-libs/angular-route.js"></script>

</head>
<body>
<div ng-controller="democtrl2">
    <mytag3 tagfn="attrd_fn(name)"></mytag3>

    <span>{{fruit}}</span>

</div>
<script type="text/javascript">
    var demoapp = angular.module('demoapp', []);

    demoapp.controller('democtrl2', ['$scope', function ($scope) {

        //方法传入参数的名称和下面自定义的directive中对象的属性名称要一致
        $scope.attrd_fn = function (name) {
            $scope.fruit = name;
        }

    }]);

    demoapp.directive('mytag3', function () {
        return {
            restrict: "AE",
            scope: {
                tagfn: "&" //属性不能有下划线
            },
            template: "<input type='text' ng-model='fruitname'/><button ng-click='tagfn({name:fruitname})'>水果名字</button>" //对象传入的属性名称和controller中方法传入的参数名称一致

        };
    });
</script>
</body>
</html>